<!--
 * @Description: 填写/修改物流单号弹窗
 * @Author: Li Yujie
 * @Date: 2021/1/22
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2021/1/22
-->
<template>
    <div class="wrapper">
        <el-dialog
            :title="TYPE === 1 ? '填写物流单号' : (TYPE === 2 ? '查看物流单号' : '修改物流单号')"
            :visible.sync="dialogVisible"
            width="640px"
            :close-on-click-modal="false"
        >
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                :style="{width: '400px', marginLeft: '45%', transform: 'translateX(-50%)'}"
            >
                <el-form-item
                    label="快递公司"
                    prop="logistics_no"
                >
                    <el-select
                        v-model="ruleForm.logistics_no"
                        placeholder="请选择快递公司"
                        size="medium"
                        filterable
                        clearable
                        style="width: 300px"
                        @change="handleSelectChange"
                        :disabled="TYPE === 2 ? true : false"
                    >
                        <el-option
                            v-for="item in expressOptions"
                            :key="item.logistics_no"
                            :label="item.name"
                            :value="item.logistics_no"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    label="快递单号"
                    prop="tracking_no"
                >
                    <div class="_flex">
                        <el-input
                            v-model="ruleForm.tracking_no"
                            placeholder="请填写快递单号"
                            size="medium"
                            clearable
                            :disabled="TYPE === 2 ? true : false"
                        />
                        <el-button
                            v-if="is_copy"
                            size="small"
                            type="primary"
                            :style="{width: '100px', marginLeft: '24px'}"
                            @click="handleCopy(ruleForm.tracking_no)"
                        >
                            复制
                        </el-button>
                    </div>
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    size="medium"
                    :style="{width: '120px', marginRight: '32px'}"
                    @click="dialogVisible = false"
                >
                    取消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    @click="handleConfirm"
                >
                    确认
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'ChangeLogisticsDialog',
    props: {
        is_copy: { //是否展示复制按钮
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            dialogVisible: false,
            expressOptions: [],
            ruleForm: {
                // 物流公司名称
                name: '',
                // 物流公司编号
                logistics_no: '',
                // 快递单号
                tracking_no: ''
            },
            rules: {
                logistics_no: [
                    {required: true, message: '请选择快递公司', trigger: 'blur'}
                ],
                tracking_no: [
                    {required: true, message: '请输入快递单号', trigger: 'blur'}
                ]
            },
            TYPE: ''
        };
    },
    mounted() {
        this.getExpress();
    },
    methods: {
        /**
         * 显示弹窗
         *  type 1:填写物流 2:查看物流 3:修改物流
         */
        show(logistics_no = '', tracking_no = '', type = 1) {
            this.dialogVisible = true;
            this.ruleForm.logistics_no = logistics_no;
            this.ruleForm.tracking_no = tracking_no;
            this.TYPE = type;
        },

        /**
         * 选择物流
         */
        handleSelectChange(logistics_no) {

            let selected = this.expressOptions.find(item => {
                return item.logistics_no === logistics_no;
            });

            this.ruleForm.name = selected.name;
            this.ruleForm.logistics_no = selected.logistics_no;
        },
        /**
         * 弹窗关闭
         */
        close() {
            this.ruleForm.name = '';
            this.ruleForm.logistics_no = '';
            this.ruleForm.tracking_no = '';
            this.dialogVisible = false;
        },

        /**
         * 确认
         */
        handleConfirm() {

            this.$refs.ruleForm.validate((valid) => {
                if(valid) {
                    let data = {...this.ruleForm};

                    this.$emit('change', data);
                    this.close();
                }
            });
        },

        /**
         * 获取物流公司信息
         * @returns {Promise<unknown>}
         */
        getExpress () {
            return new Promise((resolve, reject) => {
                this.$post('/student/logistics%5Cget_list', {}, resp => {
                    if (resp.code === 1) {
                        this.expressOptions = resp.data.list;
                        resolve(resp.data.list);
                    }else {
                        reject(resp);
                    }
                });
            });

        },

        handleCopy (content) {
            let str = content;
            let oInput = document.createElement("input");

            oInput.value = str;
            document.body.appendChild(oInput);
            oInput.select();
            document.execCommand("Copy");
            oInput.style.display = "none";
            this.$message.success('复制成功');
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    ._flex {
        display: flex;
        align-items: center;
    }
    /deep/ .el-dialog {
        margin-top: 15vh!important;
        .el-dialog__header {
            padding-top: 10px;
            box-shadow: 0 1px 0 0 rgba(233, 233, 233, 1);
            display: flex;
            align-items: center;
            background: #FAFAFA;
            border-radius: 4px 4px 0 0;

            .el-dialog__title {
                font-weight: 500;
                color: #333;
                font-size: 14px;
            }

            .el-icon-close:before {
                color: rgb(194, 194, 194);
                font-size: 17px;
                font-weight: bold;
            }

            .el-dialog__headerbtn {
                top: 14px;
            }
        }

        .el-dialog__body {
            padding: 24px 24px 0;
        }

        .el-textarea__inner {
            resize: none;
        }

        .el-dialog__footer {
            text-align: center;
            padding-bottom: 30px;
            margin-top: 6px;
        }
    }
}
</style>
